<template>
  <div class="category">
    <van-sticky>
      <van-search v-model="value" placeholder="请输入搜索关键词" />
    </van-sticky>
    <div class="main rel">
      <van-sidebar class="fls0 main-left" height="100vh" v-model="activeKey">
        <van-sidebar-item v-for="item in reccomd" :title="item.name" @click="onTab(item.categoryId)" />
      </van-sidebar>
      <div class="main-righ bfff">
        <div class=" fca fww ">
          <div v-for="(item, index) in product" :key="item.productId" class="product-item fcc fdc">
            <img class="product-img" :src="item.imgUrl" alt="">
            <span class="f12 ovh2">{{ (item.masterName).slice(4) }}</span>
          </div>
          <div class="product-item"></div>
        </div>
      </div>
    </div>

  </div>
</template>

<script>
import Vue from 'vue';
import { Search, Sidebar, SidebarItem, Sticky } from 'vant';
import { fetchCategoryAll } from '@/api/index';
import { fetchCategorList } from '../../api';

Vue.use(Sidebar);
Vue.use(SidebarItem);
Vue.use(Search);
Vue.use(Sticky);
export default {
  data() {
    return {
      value: '',
      activeKey: 0,
      reccomd: [],
      product: []
    };
  },
  created() {
    this.reccomded();
    this.producted({ categoryId: this.$route.params.id });

  },
  methods: {
    onTab(id) {
      this.producted({ categoryId: id });
    },
    async reccomded() {
      try {
        let reccomdRes = await fetchCategoryAll();
        this.reccomd = reccomdRes.list;
        if (!!this.$route.params.id) {
          const index = this.reccomd.findIndex(item => item.categoryId === this.$route.params.id);
          this.activeKey = index;
        }
      } catch (error) {
        console.log(error);
      }
    },
    async producted(params = { categoryId: 145 }) {
      try {
        let productRes = await fetchCategorList(params);
        this.product = productRes.list;
      } catch (error) {
        console.log(error);
      }
    }
  },
}
</script>

<style scoped lang="less">
.product-item {
  width: 100px;
}

.product-img {
  width: 90px;
  height: 90px;
}

.main-left {
  position: absolute;
  top: 0;
  left: 0;
  height: 100vh;
}

.main-righ {
  margin-left: 80px;
  width: calc(100% - 80px);
  min-height: 100vh;
}

.product-item {
  width: 30%;
  height: 118px;
}
</style>